<template>
  <div>
    <Breadcrumb :style="{ margin: '15px 0', float: 'left' }">
      <BreadcrumbItem>统计</BreadcrumbItem>
    </Breadcrumb>

    <div class="top">
      <div class="top-box">
        <div class="box-title">
          <div>
            <div class="title-name">今日订单数</div>
            <div class="title-num">
              <span class="money-icon"></span>{{dayCount}}
            </div>
          </div>
          <div class="xian"></div>
        </div>

        <!-- <div class="box-bottom">比昨日 <span class="day">30% </span></div> -->
      </div>

      <div class="top-box">
        <div class="box-title">
          <div>
            <div class="title-name">今日订单总金额</div>
            <div class="title-num">
              <span class="money-icon">￥</span>{{shopDayItem.orderAmt}}
            </div>
          </div>
          <div class="xian"></div>
        </div>

        <!-- <div class="box-bottom">比昨日 <span class="day">30% </span></div> -->
      </div>
      <div class="top-box">
        <div class="box-title">
          <div>
            <div class="title-name">今日利润额</div>
            <div class="title-num">
              <span class="money-icon">￥</span>{{shopDayItem.totalProfitAmt}}
            </div>
          </div>
          <div class="xian"></div>
        </div>

        <!-- <div class="box-bottom">比昨日 <span class="day">30% </span></div> -->
      </div>
      <div class="top-box">
        <div class="box-title">
          <div>
            <div class="title-name">退款订单</div>
            <div class="title-num">
              <span class="money-icon"></span>{{shopDayItem.refundQty}}
            </div>
          </div>
          <div class="xian"></div>
        </div>

        <!-- <div class="box-bottom">比昨日 <span class="day">30% </span></div> -->
      </div>
      <div class="top-box">
        <div class="box-title">
          <div>
            <div class="title-name">退款总金额</div>
            <div class="title-num">
              <span class="money-icon">￥</span>{{shopDayItem.refundAmt}}
            </div>
          </div>
        </div>

        <!-- <div class="box-bottom">比昨日 <span class="day">30% </span></div> -->
      </div>
    </div>
    <div class="content">
      <div class="content-left">
        <div ref="con" class="ec-box">
          <Card :bordered="false">
            <p slot="title">营销业绩</p>
            <div class="table-list">
              <viewYxyj></viewYxyj>
            </div>
          </Card>
        </div>
      </div>
      <div class="content-right">
        <div ref="con" class="ec-box">
          <Card :bordered="false">
            <p slot="title">待办事项</p>
            <div class="table-list">
              <Table highlight-row :columns="columns" :data="data1"></Table>
            </div>
          </Card>
        </div>
      </div>
    </div>
    <div class="footer">
      <div>
        <!-- <viewOrder></viewOrder> -->
      </div>
    </div>
  </div>
</template>
<script>
import viewYxyj from "./components/viewYxyj.vue"
export default {
  data() {
    return {
      shopDayItem: {},
      shopTuiItem: {},
      shopToItem:{},
      dayCount:'',
      ecWidth: "",
      columns: [
        {
          width: 80,
          title: "序号",
          key: "name",

        },
        {
          title: "待办类型",
          key: "age",
        },
        {
          title: "处理状态",
          key: "address",
        },
        {
          title: "时间",
          key: "address",
        },
      ],
      data1: [
        {
          name: "1",
          age: '退货申请',
          address: "未处理",
          date: "2024-07-18",
        },
        {
          name: "2",
          age: '退货申请',
          address: "未处理",
          date: "2024-07-15",
        },
        {
          name: "3",
          age: '采购单',
          address: "未处理",
          date: "2024-07-15",
        },
        {
          name: "4",
          age: '采购单',
          address: "未处理",
          date: "2024-07-15",
        },
      ],
    }
  },
  components: {
    viewYxyj,
  },
  mounted() {
    this.init();
  },
  computed: {},
  methods: {
    init() {
      this.shopDataInit();
      // this.tuiInit()
      this.orderDaycount()
    },
    orderDaycount(){
      let time;
      var date = new Date();
      console.log(date)
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var dates = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (dates >= 0 && dates <= 9) {
        dates = "0" + dates;
      }
      time = year + month + dates;
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/mall/goods/order/page",
        query: {
          equal: {
            orderType: 1,
            orderDate: time+''
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data.list;
            this.dayCount =res.data.data.count;
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
    tuiInit(){
      let time;
      var date = new Date();
      console.log(date)
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var dates = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (dates >= 0 && dates <= 9) {
        dates = "0" + dates;
      }
      time = year + month + dates;
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/view/scm/supplier/settle/bill/detail",
        query: {
          equal: {
            settleStartDate: time,
            settleEndDate: time,
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            const data = res.data.data;
            this.shopTuiItem = data[0];
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
    shopDataInit() {
      let time;
      var date = new Date();
      console.log(date)
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var dates = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (dates >= 0 && dates <= 9) {
        dates = "0" + dates;
      }
      time = year + month + dates;
      new this.$rest({
        gateway: 'agrobiz',
        service: "agrobiz-order",
        url: "/v1.0/view/scm/shop/settle/bill",
        query: {
          equal: {
            settleStartDate: time+'',
            settleEndDate: time+'',
          },
        },
        action: (res) => {
          if (res.data.code === 20000) {
            if(res.data.data[0]) this.shopDayItem = res.data.data[0]
          } else {
            this.$Notice.warning({
              title: "获取失败",
              desc: `失败原因：${res.data.msg}`,
            });
          }
        },
      }).get();
    },
  },
  created() {
    // this.Init()
  },
};
</script>

<style  scoped>
.page {
  width: 100%;
  margin-top: 50px;
  min-height: 100vh;
  background: #fafafa;
}
.top {
  width: 100%;
  background-color: #fff;
  display: flex;
}
.top-box {
  width: 20%;
  height: 130px;
  background-color: #ffffff;
  padding-top: 10px;
}
.box-title {
  width: 100%;
  display: flex;
  margin-left: 20px;
  justify-content: space-between;
}
.box-bottom {
  margin-left: 20px;
}
.title-num {
  font-size: 30px;
  font-weight: bold;
}
.title-name {
  color: #909399;
  font-size: 15px;
}
.money-icon {
  font-size: 16px;
}
.xian {
  width: 1px;
  height: 80px;
  background-color: #dcdfe6;
  margin-right: 40px;
}
.day {
  font-weight: bold;
  color: red;
}
.content {
  width: 100%;
  display: flex;
  /* background-color: #FFFFFF; */
  margin-top: 16px;
}
.content-left {
  width: 55%;
  background-color: #ffffff;
}
.content-right {
  width: 43%;
  margin-left: 2%;
}
.ec-box {
  width: 100%;
  height: 300px;
  /* background-color: #F5F7F9; */
}
.table-list {
  min-height: 300px;
}
</style>
